<template>
  <div>
    <el-image style="width: 470px; height: 400px;" :src="path.image + good.imgs" :fit="fit"></el-image>
    <el-row>
      <h4>编号：{{good.no}}</h4>
    </el-row>
    <el-row>
      <h4>名字：{{good.name}}</h4>
    </el-row>
    <el-row>
      <h4>描述：{{good.description}}</h4>
    </el-row>
    <el-row>
      <h4>所属店铺：{{good.description}}</h4>
    </el-row>
    <el-row>
      <h4>所属商家：{{good.userName}}</h4>
    </el-row>
     <el-row>
      <h4>上架时间：{{good.createTime}}</h4>
    </el-row>
  </div>
</template>

<script setup>
import { get } from '@/plugins/axios';
import path from './path';
import { reactive } from 'vue';
const good = reactive({
  id:null,
  name: '',
  description:'',
  no:'',
  imgs:'/images/morentouxiang.jpg',
  createTime: '',
  state: 0,
  shopName:'',
  userName:'',
  recommend:''
})
const props = defineProps(['id'])

getGood()
function getGood(){
  get(path.get,{id:props.id},content =>{
    for(let key in good){
      // 将后端没有的属性的数据排除掉
      if(Object.prototype.hasOwnProperty.call(content,key)){
        good[key] = content[key]
      }
    }
    getCategory()
  })
}

// 获取分类类型
function getCategory(){
  get('/role/arr',{ id: good.roleId},content => {
    good.roleName = content[0].name
    console.dir(good)
  })
}

</script>

<style scoped lang="scss">
 .el-row{
  margin-top: 20px;
 }
</style>